<template>
	<view class="container">
		<view class="tabsBox">
			<u-tabs :list="tabList" :scrollable='false' @click="tabClick" lineColor="#FD9618" activeStyle='color:#FD9618;'></u-tabs>
		</view>
		<view class="content">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="message" v-for="(item,i) in list" :key="i" @click="messageDetail(item)">
				<view class="message-top">
					<u-tag text="评价" type="warning" size="mini" class="mr-5" v-if="filterStatus(item)"></u-tag>
					<text>{{item.content}}</text>
				</view>
				<view class="message-bottom">
					点击{{filterStatus(item) ? '评价':'查看'}}
				</view>
			</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onPageScroll, onReachBottom } from "@dcloudio/uni-app"
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
import { getMessagePage, updateStatus } from '@/common/API/member'
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom)

const tabList = ref([{
	name: '未读消息',
	value: 1,
}, {
	name: '已读消息',
	value: 2,
}])
const curStatus = ref(1)

const tabClick = (item)=> {
	curStatus.value = item.value
	resetScroll()
}

const filterStatus = (item) => {
  return item?.type === 1 && !item?.isEvaluated
}

const messageDetail = async (item)=>{
  if(curStatus.value === 1){
    // TODO 更新为已读状态
   await updateStatus(item.id)
  }
  // 新增评价
  if(filterStatus(item)){
    uni.navigateTo({
      url: `/pages/personal/suggestion/add?info=${encodeURIComponent(JSON.stringify({...item, from:'message'}))}`
    })
  } else { // 查看详情
    uni.navigateTo({
      url: `/pages/personal/suggestion/detail?id=${item.id}&commentType=${item.commentType}&from=message`
    })
  }
}

const list = ref<any>([])
const upCallback = async (mescroll)=>{
	if(uni.getStorageSync('userId')){
		let data = {
			pageNo: mescroll.num,
			pageSize: mescroll.size,
			userId: uni.getStorageSync('userId'),
			status: curStatus.value
		}
		let res = await getMessagePage(data)
		let curPageData = res.list;
		let curPageLen = curPageData.length;
		if(mescroll.num == 1) list.value = [];
		list.value = list.value.concat(curPageData);
		mescroll.endSuccess(curPageLen);
	}else{
		mescroll.endSuccess(0);
	}
}

const resetScroll = ()=>{
	list.value = [];
	downCallback()
}
</script>

<style lang="scss" scoped>
.container{
	background: #fff;
	height: 100vh;
	.tabsBox{
		background: #fff;
		border-bottom: 2rpx solid #E5E5E5;
		width: 100%;
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 80rpx;
		/* #endif */
		left: 0;
		z-index: 99;
		::v-deep.u-tabs__wrapper__nav__line{
			bottom: 0;
		}
	}
	.content {
		padding: 100rpx 0 32rpx;
		background-color: #fff;
		.message {
			background-color: #fff;
			border-radius: 8rpx;
			padding: 40rpx 32rpx 20rpx;
			box-shadow: 0 6rpx 32rpx 2rpx rgba(0, 0, 0, 0.03);
			width: 686rpx;
			margin: 0 auto 15rpx;
			.message-top {
				font-size: 32rpx;
				line-height: 44rpx;
				font-weight: 400;
				/* #ifdef MP */
				::v-deep.u-transition{
					display: inline-block;
					margin-right: 5px;
				}
				/* #endif */
				.mr-5{
					margin-right: 5px;
				}
			}
			.message-bottom {
				text-align: center;
				margin-top: 40rpx;
				color: #666;
				border-top: 2rpx #E5E5E5 solid;
				line-height: 40rpx;
				line-height: 55rpx;
				padding-top: 24rpx;
			}

		}
	}
}
</style>
